<template>
	<div class="content cashBox">
		<div class="searchBox">
			<span class="searchText">会员账户:</span><input type="text" class="searchInput" placeholder="请输入会员账户" v-model="menPhone">
			<span class="searchText">活动主题:</span><input type="text" class="searchInput" placeholder="请输入活动主题" v-model="activityTheme">
			<span class="searchText">活动场景:</span>
			<select class="searchInput" v-model="activityType">
				<option value="">请选择活动场景</option>
				<option value="994001">注册</option>
				<option value="994002">充值</option>
				<option value="994003">充电</option>
				<option value="994004">页面活动</option>
				<!-- <option value="994005">分享</option> -->
			</select>
			<span class="searchText">返现类型:</span>
			<select class="searchInput" v-model="differentiate">
				<option value="">请选择返现类型</option>
				<option value="986001">固定返现</option>
				<option value="986002">随机返现</option>
				<option value="986003">百分比返现</option>
			</select>
			<div class="searchBut" @click="findCashBackList"><img src="../../assets/search.png" class="foundPic"/>搜索</div>
		</div>
		<div class="tableBox">
			<div class="playBox">
				<div :class="[one,{'detail':classa,'gray':classb}]" @click="cashBackDetail">详情</div>
				<div class="butInfoMes export" @click="exportCashBack">导出</div>
			</div>
			<div class="contentTable">
				<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
				</div>
				<div v-else-if="searchType == 2">
					<img src="~_assets/nosearch.png" class="searchResult">
				</div>
				<bootstrap-table v-else :my_columns="my_columns" :my_data="data1" :my_options="my_options" @item="getItem" ref="table1"></bootstrap-table>
			</div>
		</div>
		<div v-if="showCashBackDetail">
			<CashBackDetail @closeCashBack='closeCashBack' :items="trData"></CashBackDetail>
		</div>
	</div>
</template>

<script>
import CashBackDetail from "./children/CashBackDetail";
import { publicVM } from "_config/public.js";
import { CASHBACK_FIND_LIST_BY_PARAM, CASHBACK_EXPORT } from "@/config/url";
export default {
  mixins: [publicVM],
  components: {
    CashBackDetail
  },
  mounted: function() {
    this.findCashBackList();
  },
  data() {
    return {
      one: "butInfoMes",
      classa: false,
      classb: true,
      searchType: "12",
      showCashBackDetail: false,
      menPhone: "", // 会员账户
      activityTheme: "", //活动主题
      activityType: "", //活动类型
      differentiate: "", //返现类型
      trData: "",
      page: 1,
      size: 10,
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(value, row, index) {
            return index + 1;
          }
        },
        {
          title: "会员账户",
          field: "menPhone"
        },
        {
          title: "活动主题",
          field: "activityTheme",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "活动场景",
          field: "activityType",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "返现类型",
          field: "differentiate",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "充值/充电订单号",
          field: "rechargeOrder",
          formatter: function(value, row, index) {
            if(row.activityType == '注册'){
              value = ''
            }else{
              if (value.length > 15) {
                value = value.substr(0, 15) + "...";
              }
            }
            return value;
          }
        },
        {
          title: "返现金额(元)",
          field: "cashbackMoney",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "获取时间",
          field: "createTime",
          sortable: true
        }
      ],
      data1: [],
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    getItem(data) {
      if (data && data.id) {
        this.classa = true;
        this.classb = false;
        this.trData = data;
      }
    },
    cashBackDetail() {
      this.showCashBackDetail = true;
    },
    closeCashBack() {
      this.showCashBackDetail = false;
    },
    findCashBackList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: CASHBACK_FIND_LIST_BY_PARAM,
        queryParams: this.getParams
      };
    },
    getParams() {
      this.classa = false;
      this.classb = true;
      let param = {
        menPhone: this.menPhone,
        activityTheme: this.activityTheme,
        activityType: this.activityType,
        differentiate: this.differentiate,
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    },
    exportCashBack() {
      this.tableExport(
        CASHBACK_EXPORT +
          "?menPhone=" +
          this.menPhone +
          "&activityTheme=" +
          this.activityTheme +
          "&activityType=" +
          this.activityType +
          "&differentiate=" +
          this.differentiate
      );
    }
  }
};
</script>

<style lang="less">
.cashBox {
  .el-input__inner {
    height: 0.18rem;
    border-radius: 8px;
    padding-left: 0.08rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(181, 194, 202, 1);
    margin-right: 0.2rem;
    margin-left: 0.04rem;
  }
  .contentTable {
    width: 99%;
  }
  .contentTable {
    width: 99%;
  }

  .bootstrap-table {
    padding-top: 0;
  }
  .bootstrap-table table thead tr th,
  .bootstrap-table table tbody tr td {
    width: 6%;
  }
  .bootstrap-table table thead tr th:nth-of-type(1),
  .bootstrap-table table tbody tr td:nth-of-type(1) {
    width: 3%;
  }
  
}
</style>